<template>
  <div>
    <el-card style="margin: 2vw;height: 86vh">
      <div class="up-card">
        <div>
          <el-button type="primary" plain @click="CMProject(0)">添加人员</el-button>
        </div>
      </div>
      <div class="down-card">
        <el-table :data="personData.arr" stripe style="width: 100vw;" height="60vh" :key="Math.random()">
          <el-table-column prop="name" label="姓名" width="120" />
          <el-table-column prop="username" label="账号" width="120" />
          <el-table-column prop="sex" label="性别" width="120" :formatter="showSex" />
          <el-table-column prop="phone" label="电话" width="120" />
          <el-table-column prop="avatar" label="头像" width="120">
            <template slot-scope="scope">
              <el-image style="width: 100px; height: 100px"
                :src="require('../../img' + personData.arr[scope.$index].avatar)" fit="fill"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="skills" label="技能" width="300">
            <template slot-scope="scope">
              <el-tag type="primary" v-for=" item  in  personData.arr[scope.$index].skills " :key="item.id">{{
                item.name
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="experience" label="工作经历" width="220" :show-overflow-tooltip="true" />
          <!-- <el-table-column label="权限控制" align="center" prop="rights"></el-table-column> -->
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" @click="CMProject(1, scope.$index)">修改</el-button>
              <!-- <el-button type="danger">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIfo.page"
          :page-sizes="[4, 8, 12, 16]" :page-size="pageIfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="projectNum">
        </el-pagination>
      </div>
    </el-card>

    <div v-show="maskShow">
      <div class="mask"></div>

      <div class="main-card">
        <div class="form-card" style="overflow:auto;">
          <el-form ref="personForm" :model="personForm" :rules="rules" label-width="80px">
            <el-form-item label="员工姓名" prop="name">
              <el-input v-model="personForm.name" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="员工账号" prop="username">
              <el-input v-model="personForm.username" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="员工性别" prop="sex">
              <el-radio v-model="personForm.sex" :label="0">女</el-radio>
              <el-radio v-model="personForm.sex" :label="1">男</el-radio>
            </el-form-item>
            <el-form-item label="员工密码" prop="pwd">
              <el-input v-model="personForm.pwd" style="width: 200px" show-password></el-input>
            </el-form-item>
            <!-- <el-form-item label="头像">
              <el-avatar :src="require('./test.jpg')"></el-avatar>
            </el-form-item> -->

            <el-form-item label="员工电话" prop="phone">
              <el-input v-model="personForm.phone" style="width: 200px"></el-input>
            </el-form-item>

            <el-form-item label="头像" prop="avatar">
              <el-upload class="avatar-uploader" action="common/upload" :show-file-list="false"
                :on-success="handleSuccess" :before-upload="beforeUpload" :on-progress="uploadProcess"
                :headers="headerObj">
                <img v-if="personForm.avatar" :src="img" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>

              <!-- <el-col :span="12" style="color: red;" v-show="Check(personForm.img)">* 头像不能为空 *</el-col> -->
            </el-form-item>
            <el-form-item label="技能" prop="skills">
              <el-select v-model="personForm.skills" multiple placeholder="请选择员工技能" :popper-append-to-body="false"
                style="width:30vw">
                <el-option v-for=" item  in  personForm.skillOptions " :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工作经历" prop="experience">
              <el-input type="textarea" v-model="personForm.experience"></el-input>
            </el-form-item>
            <!-- <el-form-item label="权限控制" prop="rights">
              <el-select v-model="personForm.rights" placeholder="请授予权限" :popper-append-to-body="false"
                style="width:30vw">
                <el-option v-for="item in personForm.rightsOptions" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item>
              <el-button type="primary" @click="AddEditPerson()">确定</el-button>
              <el-button @click="resetPersonForm('personForm')">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { VEPagesApi, addPersonApi, editPersonApi, skillApi, downLoadImgApi } from './apis.js'
export default {
  name: 'Staff',
  data() {
    return {
      CM: false,
      img: '',
      maskShow: 0,
      storage: {
        storageSkills: [],
        index: 0,
      },
      personData: {
        arr: []
      },
      pageIfo: { page: 1, pageSize: 4, name: '' },
      projectNum: 40,
      personForm: {
        name: '',
        sex: 1,
        phone: '',
        pwd: '123',
        avatar: '',
        skills: [],
        skillOptions: [],
        experience: '',
        username: '',
      },

      trueSex: [
        {
          value: "0",
          label: "女",
        },
        {
          value: "1",
          label: "男",
        }
      ],
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' },],
        username: [{ required: true, message: '请输入账号', trigger: 'blur' },],
        sex: [{ required: true, message: '请输入性别', trigger: 'blur' },],
        phone: [{ required: true, message: '请输入正确的手机号码！', trigger: 'blur' }, {
          pattern: /^((1[3456789]\d{9}))$/,
          message: '请输入正确的手机号码!',
        }],
        pwd: [{ required: true, message: '请输入密码', trigger: 'blur' },],
        // img: [{ required: true, message: '请上传图片', trigger: 'change' }],
        avatar: [{ required: true, message: '请上传图片', trigger: 'change' }],
        skills: [{ required: true, message: '请选择技能', trigger: 'change' }],
        experience: [{ required: true, message: '请输入工作经历', trigger: 'blur' }],
        rights: [{ required: true, message: '请选择权限', trigger: 'change' }],
      },
      headerObj: {
        Authorization: 'Bearer' + getToken()
      },
    }
  },
  mounted() {
    this.getList();
    // console.log(this.personData.arr);
    this.skill();

  },
  methods: {
    handleSuccess(res) {
      console.log(res.msg);
      this.personForm.avatar = res.msg;
      downLoadImgApi({ name: this.personForm.avatar }).then(res => {
        // console.log(res);
        let blob = new Blob([res], { type: 'image/png' })
        this.img = window.URL.createObjectURL(blob);

      }).catch(err => {
        console.log(err)//代码错误、请求失败捕获
      })

      if (res) {
        // console.log(res);
      } else {

        console.log('error');

      }
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    uploadProcess() {

    },
    skill() {
      skillApi().then(res => {
        this.storage.storageSkills = res.data;
        res.data.forEach((item) => {
          this.personForm.skillOptions.push({ value: item.id, label: item.name });
        })
      })
    },
    AddEditPerson() {
      if (this.CM === false) {
        addPersonApi({
          avatar: this.personForm.avatar,
          name: this.personForm.name,
          phone: this.personForm.phone,
          experience: this.personForm.experience,
          sex: this.personForm.sex,
          skillIds: this.personForm.skills,
          username: this.personForm.username,
          password: "123",
        }).then(res => {
          this.resetPersonForm('personForm');
          this.getList();
        })
      }
      else {
        this.personData.arr[this.storage.index].name = this.personForm.name;
        this.personData.arr[this.storage.index].phone = this.personForm.phone;
        this.personData.arr[this.storage.index].experience = this.personForm.experience;
        this.personData.arr[this.storage.index].username = this.personForm.username;
        this.personData.arr[this.storage.index].password = this.personForm.pwd;
        this.personData.arr[this.storage.index].avatar = this.personForm.avatar;
        this.personData.arr[this.storage.index].sex = this.personForm.sex;
        this.personData.arr[this.storage.index].skills = this.storage.storageSkills.filter((item) => {
          return this.personForm.skills.find(prop => {
            return prop === item.id
          })
        });
        editPersonApi(this.personData.arr[this.storage.index]).then(res => {
          this.resetPersonForm('personForm');
          this.getList();
        });
      }
    },
    handleSizeChange(val) {
      this.pageIfo.page = 1;
      this.pageIfo.pageSize = Number(val);
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageIfo.page = Number(val);
      this.getList();

    },
    getList() {
      let that = this;
      that.personData.arr = [];
      VEPagesApi({ page: this.pageIfo.page, size: this.pageIfo.pageSize, skillIds: '' }).then(res => {
        console.log(res.data);
        that.projectNum = res.data.totalElements;
        res.data.content.forEach(function (item, index) {
          that.personData.arr.push(item)
        })
      })
    },
    CMProject(res, index) {
      this.storage.index = index;
      this.maskShow = 1;
      if (res === 1) {
        this.CM = true;
        this.personForm.name = this.personData.arr[index].name;
        this.personForm.avatar = this.personData.arr[index].avatar;
        this.personData.arr[index].skills.forEach((item) => {
          this.personForm.skills.push(item.id);
        });
        this.personForm.experience = this.personData.arr[index].experience;
        this.personForm.phone = this.personData.arr[index].phone;
        this.personForm.pwd = '123';
        this.personForm.sex = this.personData.arr[index].sex;
        this.personForm.username = this.personData.arr[index].username;
        // this.personForm.rights = this.personData.arr[index].rights;
      }
      else {
        this.CM = false;
      }
    },
    resetPersonForm(formName) {
      this.maskShow = 0;
      formName && this.$refs[formName].resetFields();
      this.personForm.name = '';
      this.personForm.avatar = '';
      this.personForm.skills = [];
      this.personForm.experience = '';
      this.personForm.phone = '';
      this.personForm.pwd = '123';
      this.personForm.sex = '';
      this.personForm.username = '';
      // this.personForm.rights = '';
    },

    Check(data) {
      return !data;
    },
    showSex(row, column) {
      if (this.trueSex) {//非空判断是为了避免循环的数组为null而产生报错
        var data = "";
        this.trueSex.forEach((item, index) => {
          if (row.sex == item.value) {
            data = item.label;
          }
        });
        return data;
      }
    },

  },
}

</script>

<style lang="scss" scoped>
.up-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.down-card {
  margin-top: 20px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 10vh;

}

.mask {
  background-color: rgb(0, 0, 0);
  opacity: 0.3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000
}

.main-card {
  width: 70vw;
  height: 80vh;
  position: fixed;
  background-color: #fff;
  border-radius: 20px;
  z-index: 10001;
  top: 10%;
  left: 20%;
  padding: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-card .form-card {
  width: 80%;
  height: 100%;
}

.main-card .form-card .line {
  text-align: center;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-tag+.el-tag {
  margin-left: 10px;
}


.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  border: 1px solid #8c939d;
}
</style>
